<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Ribaudio Labs</title>
    <link type="text/css" rel="Stylesheet" href="css/reset-min.css" />
    <link type="text/css" rel="Stylesheet" href="css/style.css" />
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA7ep2oiWcbofSLsv2hvBrJRQSkF9niP5943kafn-9Pdkwiq5-oBTGRIC1cZ9DrSi8S_M-1ewJ9apxdw"></script>
    <script type="text/javascript">
      google.load("maps", "2");
      google.load("search", "1");
    </script>
    <script type="text/javascript" src="js/yahoo.js"></script>
    <script type="text/javascript" src="js/event.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/hs/util.js"></script>
    <script type="text/javascript" src="js/hs/HSEngine.js"></script>
    <script type="text/javascript" src="js/hs/HSEngine.loadBases.js"></script>
    
</head>
<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    try {
        var pageTracker = _gat._getTracker("UA-3756989-4");
        pageTracker._trackPageview();
    } catch (err) { }</script>
<body onunload="GUnload()">
    <div id="loading">
        Loading...<br />
        <img src="img/loading.gif" border="0" alt="Loading..." />
    </div>
    <div id="address">
        Enter a city and state:
        <input type="text" id="txtAddress" style="width:500px;" value="1 Broadway, Cambridge, Middlesex, Massachusetts 02142" />
        <input type="button" id="btnStart" value="Start!" />
        <div id="credits">Built by Adam Ribaudo.  Best played with <a href="http://www.mozilla.com/en-US/firefox/" style="text-decoration:none">Firefox 3</a>.</div>
        <img src="http://www.makingthenoise.com/images/string_image.php.png" border="0" alt="Adam Ribaudo" />
        <div id="directions"></div>
    </div>
    <div id="game">
        <div id="map"></div>
        <div id="smallMap"></div>
        <div id="zoomControls"><b>+</b><i>_</i></div>
        <div id="ui">
                <div id="corner"></div>
                <h3 id="round">Round: <span id="roundNum"></span> of <span id="totalRounds"></span>  <input type="button" id="btnStop" value="Pause Game" /></h3>
               
                <h3>Cash: <span id="playerMoney">$50</span></h3>
                <h3>Towers</h3>
                <ul id="towers">
                  <li>
                    <button  id="btnMTurret" ><img src="img/turretFacingSW.png" style="height:35px;width:35px" /><strong>Machine Gun</strong></button>
                    <div>
                      <p>The machine gun tower inflicts light damage but has good range.</p>
                      <dl>
                      	<dt>Price:</dt><dd id="MTurretPrice" />
                        <dt>Damage:</dt><dd id="MTurretDamage" />
                        <dt>Range:</dt><dd id="MTurretRange" />
                      </dl>
                    </div>
                  </li>
                  <li>
                    <button id="btnITurret"><img src="img/lTurretFacingSW.png" style="height:35px;width:35px" /><strong>Ice Gun</strong></button>
                    <div>
                      <p>The ice tower has a short range, but slows multiple enemies at a time. </p>
                      <dl>
                      	<dt>Price:</dt><dd id="ITurretPrice" />
                        <dt>Damage:</dt><dd id="ITurretDamage" />
                        <dt>Range:</dt><dd id="ITurretRange" />
                        <dt>Max Targets:</dt><dd id="ITurretTargets" />
                      </dl>
                    </div>
                  </li>
                   <li>
                    <button id="btnCTurret"><img src="http://labs.ribaudio.com/herosquad/img/cturretsw.png" style="height:55px;width:55px" /><strong>Canon</strong></button>
                    <div>
                      <p>The canon has long range and causes splash damage. </p>
                      <dl>
                      	<dt>Price:</dt><dd id="CTurretPrice" />
                        <dt>Damage:</dt><dd id="CTurretDamage" />
                        <dt>Range:</dt><dd id="CTurretRange" />
                        <dt>Splash Range:</dt><dd id="CTurretSplashRange" />
                      </dl>
                    </div>
                  </li>
                </ul> <!-- ul#towers -->
                <h3>Your bases</h3>
                <ul id="bases">
                  <li>
                    <img src="img/baseblue.png" rel="blue" title="Click to center">
                    <span>Health: </span><span id="blueBaseHealth">20</span>
                  </li>
                  <li>
                    <img src="img/basegreen.png" rel="green" title="Click to center">
                    <span>Health: </span><span id="greenBaseHealth">20</span>
                  </li>
                  <li>
                    <img src="img/baseteal.png" rel="teal" title="Click to center">

                    <span>Health: </span><span id="tealBaseHealth">20</span>
                  </li>
                </ul>
               
        </div> <!-- div#ui -->
        <div class="instruc" style="display:none;">Press ESC to cancel</div>

    </div> <!-- div#game -->

    <script type="text/javascript">
        var game = null;
        $("#btnStop").click(function() { if (this.value == "Pause Game") { clearInterval(game.intervalID); this.value = "Resume Game"; } else { game.start(); this.value = "Pause Game"; } });

        $("#btnMTurret").click(function() {  game.addTurretMode("MTurret"); });
        $("#btnITurret").click(function() {  game.addTurretMode("ITurret"); });
        $("#btnCTurret").click(function() {  game.addTurretMode("CTurret"); });


        $('#bases img ').click(function(){
          var name = $(this).attr('rel');
          name && game.map.panTo(game.bases[name].point);
        })


        $('#towers button').click(function(){
          $('#ui,div.instruc').toggle();
          //GEvent.trigger(game.map,'mousemove');
        });
        $(document).keyup(function(e){
          //Handle escape
          if (e.keyCode === 27 &&  !$('#ui').is(':visible') ){
            //$('#towers button').triggerHandler('click');
            $('#ui,div.instruc').toggle();
            game.movePlayerMode();
          }
        });
        
       var gameReady = new YAHOO.util.CustomEvent("onGameReady", this);
       
       gameReady.subscribe(function(){
          game.onMarkerDrop.subscribe(function(type,args){
             $('#ui,div.instruc').toggle();
           })
       });

       window.alert = function(str){
         $('<div id="alert"></div>').text(str)
          .hide().appendTo('body').slideDown('slow').animate({'opacity':1},5000).slideUp('slow');
       }

		$(window).resize(function(){
		$('#map').height( $(window).height() );
		});

        $(document).ready(function() {
            $("#loading").hide();
            $("#address").show();
            $("#map").css("height", document.documentElement.clientHeight);
            $("#btnStart").click(function() {
                //debugStart();
                //function debugStart() {
                var geocoder = new GClientGeocoder();
                var startingPoint = null;

                var address = $("#txtAddress").val();
                geocoder.getLatLng(
                        address,
                        function(startingPoint) {
                            if (!startingPoint) {
                                alert(address + " not found. try again.");
                            } else {
                                $("#address").hide();
                                $("#game").show();

                                game = new HSEngine(startingPoint);
                                $("#totalRounds").text(Wave.maxWaves);
                                game.start();
                                gameReady.fire();
                            }
                        }
                      );
            }
            );
            
            var CL = google.loader.ClientLocation;
            if (CL &&  CL.address.city && CL.address.country_code && CL.address.region) {
                $("#address").val(CL.address.city + ', '+ CL.address.region +", "+ CL.address.country);
            }
        });

    </script>
    <script type="text/javascript" src="js/hs/creatures/Creature.js"></script>
    <script type="text/javascript" src="js/hs/creatures/Player.js"></script>
    <script type="text/javascript" src="js/hs/creatures/Demon.js"></script>
    <script type="text/javascript" src="js/hs/creatures/Wasp.js"></script>
    <script type="text/javascript" src="js/hs/creatures/Zombie.js"></script>
    <script type="text/javascript" src="js/hs/turrets/Turret.js"></script>
    <script type="text/javascript" src="js/hs/turrets/MTurret.js"></script>
    <script type="text/javascript" src="js/hs/turrets/ITurret.js"></script>
    <script type="text/javascript" src="js/hs/turrets/CTurret.js"></script>
    <script type="text/javascript" src="js/hs/bases/Base.js"></script>
    <script type="text/javascript" src="js/hs/bases/BlueBase.js"></script>
    <script type="text/javascript" src="js/hs/bases/GreenBase.js"></script>
    <script type="text/javascript" src="js/hs/bases/TealBase.js"></script>
    <script type="text/javascript" src="js/hs/waves/Wave.js"></script>
    <script type="text/javascript" src="js/hs/waves/Wave1.js"></script>
    <script type="text/javascript" src="js/hs/waves/Wave2.js"></script>
    <script type="text/javascript" src="js/hs/waves/Wave3.js"></script>
    <script type="text/javascript" src="js/hs/waves/Wave4.js"></script>
        
</body>
</html>
